
/**
 *	Vanilla Javascript library: ImgSlide
 *
 *	Copyright 2013 Sung-ihk Yang (unikys at gmail.com)
 *
 *	Permission is hereby granted, free of charge, to any person obtaining a copy
 *	of this software and associated documentation files (the "Software"), to 
 *	deal in the Software without restriction, including without limitation the
 *	rights to use, copy, modify, merge, publish, distribute, sublicense, and/or 
 *	sell copies of the Software, and to permit persons to whom the Software is
 *	furnished to do so, subject to the following conditions:
 *
 *	The above copyright notice and this permission notice shall be included in 
 *	all copies or substantial portions of the Software.
 *
 *	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
 *	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
 *	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
 *	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
 *	FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 *	IN THE SOFTWARE.
 */


 (function (doc, win, VJ, undefined) {
	var __ = function (q) { return doc.querySelector(q);},
		_ = function (id) { return doc.getElementById(id);},
		_create = function (tag) {return doc.createElement(tag);},
		_arrImgSlides = [];

	if (!VJ) {
		VJ = {};
	}

	VJ.imgSlide = function (domId, imgList, options) {
		var imageSlide = _arrImgSlides[domId];
		if (imageSlide) {
			return imageSlide;
		}
		imageSlide = new _ImageSlide(domId, imgList, options);
		_arrImgSlides[domId] = imageSlide;
		return imageSlide;
	};

	/**
	 *	Call this function with css.call(dom, stylename)
	 */
	function css(styleName, value)	{
		styleName.replace(/-([a-z])/g, function (g) {
			return g[1].toUpperCase();
		});
		if (value !== undefined) {
			this.style[styleName] = value;
			return this;
		} else {
			if (this.currentStyle) {
				return this.currentStyle[styleName];
			} else if (document.defaultView && document.defaultView.getComputedStyle) {
				return document.defaultView.getComputedStyle(this)[styleName];
			} else {
				return this.style[styleName];
			}
		}
	}

	function setDefaultOptions (options) {
		function defaultTrue(value) {
			return value === undefined ? true : (value || false);
		}
		options.width = options.width || css.call(this.dom, "width");
		options.height = options.height || css.call(this.dom, "height");
		options.autoFlow = "";
		options.lock = "";
		options.scrollTime = "";
		options.random = "";
		options.itemWidth = "";
		options.itemHeight = "";
		options.row = 1;
		options.showItemNumber = 11;
		options.pauseTime = 0;
		options.position = 0;
		options.orientation = options.orientation || "horizontal";
		options.circular = options.circular || false;
		options.type = options.type || "img";

		return options;
	}

	_ImageSlide = function (domId, imgList, options) {
		function generateSlideDOM(imgList, options) {
			var arrDOM = [],	// the item dom array
				arrItem = [],
				fnGenerateDOM,
				i,
				item,
				imgLength = imgList.length,
				blockString = "block";
			if (options.orientation === "horizontal") {
				blockString = "inline-block";
			}
			if (options.type.toLowerCase() === "img") {
				fnGenerateDOM = function (src) {
					var dom = _create("div"),
						domImg = _create("img"),
						domImgStyle = domImg.style;
					domImg.src = src;
					domImgStyle.width = this.width = options.itemWidth || "";
					domImgStyle.height = this.height = options.itemHeight || "";
					dom.style.display = blockString;
					dom.appendChild(domImg);
					this.dom = dom;
					return dom;
				}
			} else if (options.type.toLowerCase() === "dom") {
				fnGenerateDOM = function (html) {
					var dom = _create("div");
					dom.innerHTML = html;
					dom.style.display = blockString;
					return dom;
				}
			}
			for (i = 0; i < imgLength; i++) {
				item = {};
				fnGenerateDOM.call(item, imgList[i]);
				arrDOM.push(fnGenerateDOM(imgList[i]));
				arrItem.push(item)
			}

			this.arrItem = arrItem;			
			return arrDOM;
		}

		function initialRender() {
			var i, domLength,
				divWrapper = _create("div"),
				divWrapperStyle = divWrapper.style,
				divSlider = _create("div"),
				divSliderStyle = divSlider.style,
				options = this.options;

			divWrapperStyle.overflow = "hidden";	//add scrollbar
			divWrapperStyle.whiteSpace = "nowrap";	//add scrollbar
			divWrapperStyle.width = this.options.width;
			divWrapperStyle.height = this.options.height;

			divSliderStyle.left = "0px";
			divSliderStyle.position = "relative";

			for (i = 0, domLength = this.arrDOM.length; i < domLength; i++) {
				divSlider.appendChild(this.arrDOM[i]);
			}

			divWrapper.appendChild(divSlider);
			this.divWrapper = divWrapper;
			this.divSlider = divSlider;
			this.dom.appendChild(divWrapper);
		}



		var dom = _(domId) || __(domId),

			arrImg = [];

		if (!dom) {
			alert("Wrong dom id");
			return;
		}
		
		this.dom = dom;
		this.options = options = setDefaultOptions.call(this, options || {});

		this.arrDOM = generateSlideDOM.call(this, imgList, options);
		this.currentPosition = 0;

		initialRender.call(this);
	}

	_ImageSlide.prototype.move = function () {

	};

	_ImageSlide.prototype.slideForward = function () {
		var currentItem = this.arrDOM[this.currentPosition],
			divSlider = this.divSlider,
			divSliderStyle = divSlider.style,
			currentItemWidth = parseInt(css.call(currentItem, "width")),
			accumulatedDelta = parseInt(divSlider.style.left),
			targetDelta = accumulatedDelta - currentItemWidth,
			moveSpeed = 10,
			_this = this;	//TODO: add ease in-out options, speed options


	
	if (_this.currentPosition < _this.arrDOM.length) {
		_this.targetDelta = targetDelta;
		if (!_this.slideIntervalId) {
			_this.slideIntervalId = setInterval(function () {
				accumulatedDelta = accumulatedDelta - moveSpeed;
					if (accumulatedDelta < targetDelta) {
						accumulatedDelta = targetDelta;
						clearInterval(_this.slideIntervalId);
						_this.slideIntervalId = false;
						_this.currentPosition++;
					}
					divSliderStyle.left = (accumulatedDelta - 1) + "px";
				}, 10);
			}
		} else if (_this.options.circular) {
			
		}
		
	};

	_ImageSlide.prototype.slideBack = function () {

	};

	_ImageSlide.prototype.slideUp = function () {

	};

	_ImageSlide.prototype.slideDown = function () {

	};

	
	win.VJ = VJ;
}(document, window, window.VJ));